<template>
  <div>
    <CustomTable
      :tableData="data"
      :columns="columns"
      :pagination="pagination"
      :loading="loading"
      @update:pagination="handlePaginationChange"
      @cell-click="handleCellClick"
      :edit-config="editConfig"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import CustomTable from "@/components/AdvancedForm/CustomTable.vue"
import type { VxeTablePropTypes } from "vxe-table"

// 表格数据
const data = ref([
  { factoryCode: "1001", factoryName: "佛山电器照明", factoryDesc: "佛山电器照明股份有限公司", status: 1 },
  { factoryCode: "1002", factoryName: "佛山泰美时代", factoryDesc: "佛山泰美时代灯具有限公司", status: 2 },
  { factoryCode: "1003", factoryName: "佛山高明  ", factoryDesc: "佛山电器照明股份有限公司高明分公司", status: 3 }
])

// 列配置
const columns = ref([
  {
    field: "factoryCode",
    fieldName: "工厂编码",
    width: 0,
    listItemType: "2-2",
    filterable: true,
    ifEnum: false,
    enumData: [],
    editRender: { name: "input" }
  },
  {
    field: "factoryName",
    fieldName: "工厂名称",
    width: 0,
    listItemType: "2-2",
    filterable: false,
    fEnum: false,
    enumData: []
  },
  {
    field: "factoryDesc",
    fieldName: "工厂描述",
    width: 0,
    listItemType: "1",
    filterable: false,
    ifEnum: false,
    enumData: []
  },
  {
    field: "status",
    fieldName: "状态",
    width: 0,
    filterable: false,
    listItemType: "2-2",
    ifEnum: true,
    enumData: [
      { value: "1", label: "开启", classType: "primary" },
      { value: "2", label: "关闭", classType: "danger" }
    ]
  }
])

const editConfig = ref<VxeTablePropTypes.EditConfig>({
  trigger: "dblclick",
  mode: "cell"
})

const pagination = ref({ pageSize: 5, currentPage: 1 })
const loading = ref(false)

// 事件处理函数
const handlePaginationChange = (pagination: any) => {
  console.log("Pagination changed:", pagination)
}

const handleCellClick = (cellInfo: { row: any; column: any }) => {
  console.log("Cell clicked:", cellInfo)
}
</script>
